<template>
    <div class="box">
        <div class="login_box">
            <el-form :model="loginForm" ref="loginForm" :rules="loginFormRules">
                <h4>员工管理系统登录</h4>
                <div class="inputArea">
                    <el-form-item prop="username">
                        <el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="密码" prefix-icon="el-icon-lock" show-password v-model="loginForm.password" @keyup.enter.native="enterLogin()"></el-input>
                    </el-form-item>
                </div>
                <div class="area">
                    <el-checkbox v-model="loginForm.remember_me" name="remember-me">记住我</el-checkbox>
                    <a href="#">忘记密码</a>
                </div>
                <div class="btnArea">
                    <el-button type="text" @click="tologin" >登录</el-button>
                    <el-button type="text" @click="toregisterPage">注册</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import qs from 'qs'
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: '',
        remember_me: false
      },
      loginFormRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 0, max: 6, message: '密码长度不能超过 6 位', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    tologin () {
      this.$refs.loginForm.validate(valid => {
        // 如果预验证通过就发起请求
        if (!valid) return
        this.$axios.post('login?' + qs.stringify(this.loginForm))
          .then(response => {
            if (response.data.code !== 200) {
              this.$message.error(response.data.message)
              this.$refs.loginForm.resetFields()
            } else {
              window.localStorage.setItem('token', response.data.data.token)
              this.$store.commit('SET_USERINFO',response.data.data)
              this.$message.success(response.data.message)
              this.$router.push('/main')
            }
          })
      })
    },
    toregisterPage () {
      this.$router.push('/register')
    },
    enterLogin() {
        this.tologin()
    }
  }
}
</script>

<style scoped>
.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;
    background: linear-gradient(120deg,rgb(6,129,140) 0%,rgb(16,70,115) 100%) no-repeat;
}

.login_box {
    width: 400px;
    height: 300px;
    margin-top: 10%;
}

.box .login_box h4 {
    color: #eee;
    font-weight: 100;
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.inputArea>>>.el-input__inner {
    outline: none;
    color: #eee;
    background-color: rgba(0,0,0,20%);
    border-radius: 2.5rem;
    border: none;
}

.inputArea>>>.el-input__inner::placeholder {
    color: #bbb;
}

.inputArea>>>.el-input__inner:hover {
    background-color: rgba(0,0,0,30%);
}

.inputArea>>>.el-input__inner:focus {
    background-color: rgba(0,0,0,40%);
}

.area, .btnArea {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.area a{
    text-indent: -4rem;
    color: #409EFF;
    text-decoration: none;
    font-size: 13px;
}

.area>>>.el-checkbox {
    color: #eee;
    text-indent: 0.2rem;
}

.btnArea>>>.el-button.el-button--text {
    color: #eee;
    border: 1px solid #eee;
    border-radius: 2.5rem;
    width: 50%;
    transition: color .3s,background-color .3s;
}

.btnArea>>>.el-button.el-button--text:hover {
    color: #333 !important;
    background-color: rgba(255,255,255,80%) !important;
}
</style>
